<template>
    <div class="shop_info">
        <van-nav-bar title="身份认证" left-arrow fixed @click-left="onClickLeft"  :right-text="status_desc"/>
      <van-form
        @submit="onSubmit"
        error-message-align="right"
        input-align="right"
       :readonly="status==0 || status==1"
      >
      <!--   -->
      <div class="enterise_info_title" style="text-align:center">请绑定您的身份证</div>
      <div style="width:90%;margin:0 auto">
      <van-field name="front_url" label="" label-width="0.01rem" style="padding-bottom: 0.6rem;"
                    :border="false" :rules="[{ required: true, message: '不能为空' }]" >
                    <template #input>
                        <van-uploader v-model="front_url" :max-count="1" preview-size="100%" :after-read="afterReadFront"
                        :before-delete="uploadDleteFront">
                            <img src="../../images/mine/tianjia_auth.png" alt="" class="tianjia_pic">
                        </van-uploader>
                        <div class="tianjia_text">请上传清晰的包含人脸的身份证照片</div>
                    </template>
                </van-field>
                <van-field name="back_url" label="" label-width="0.01rem" style="padding-bottom: 0.6rem;"  :border="false"
                :rules="[{ required: true, message: '不能为空' }]">
                    <template #input>
                        <van-uploader v-model="back_url" :max-count="1" preview-size="100%" :after-read="afterReadBack"
                    :before-delete="uploadDleteBack">
                        <img src="../../images/mine/tianjia_auth.png" alt="" class="tianjia_pic">
                    </van-uploader>
                    <div class="tianjia_text">请上传清晰的包含国徽的身份证照片</div>
                    </template>
                </van-field>
        <van-field
          name="card_url"
          label=""
          label-width="0.01rem"
          :border="false"
           :rules="[{ required: true, message: '不能为空' }]"
        style="padding-bottom: 0.6rem;"

        >
          <template #input>
            <van-uploader
              v-model="card_url"
              :max-count="1"
              preview-size="100%"
              :after-read="afterReadFrontCard"
              :before-delete="uploadDleteFrontCard"
            >
              <img
                src="../../images/mine/tianjia_auth.png"
                alt=""
                class="tianjia_pic"
              />
            </van-uploader>
            <div class="tianjia_text">请上传清晰的银行卡正面照片</div>
          </template>
        </van-field>
            </div>
            <van-field v-model="name" name="name" label="真实姓名" placeholder="请输入真实姓名"
             :rules="[{ required: true, message: '请输入真实姓名' }]" />
            <van-field
          v-model="phone"
          name="phone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请输入手机号' }]"
        />
            <van-field v-model="identity_card_no" name="identity_card_no" label="身份证号" placeholder="请输入身份证号"
             :rules="[{ required: true, message: '请输入身份证号' }]" />
            <van-field
          v-model="account"
          name="account"
          label="银行卡号"
          placeholder="银行卡号"
          :rules="[{ required: true, message: '请输入银行卡号' }]"
          
        />
        <van-field
          v-model="bank_name"
          name="bank_name"
          label="所属银行"
          placeholder="所属银行"
        />
        <van-field
          v-model="alipay_account"
          name="alipay_account"
          label="支付宝账号"
          placeholder="请输入支付宝账号"
          :rules="[{ required: true, message: '请输入支付宝账号' }]"
        />
        <div class="tip">
            注：
            <br>
1.姓名、身份证号、银行卡、手机号一致才才可以通过审核
<br>
2.手机号必须和银行柜台预留的手机号一致
<br>
3.实名认证一经通过，后续提现银行开户名必须与实名认证信息一致，否则不可使用系统
<br>
        </div>
        <div style="margin: 16px;margin-top:.96rem">
            <!--   -->
          <van-button
         
          style="border-radius: 0.16rem;"
            round
            block
            type="info"
            native-type="submit"
            color="#FF6200"
            :disabled="status==0 || status==1"
            >确认提交</van-button
          >
        </div>
      </van-form>

    </div>
  </template>
  <script>
  import {OCR_RECOGNIZE,IDENTITY_INFO,IDENTITY_COMMIT} from "@/api/mine";
  import { getOssParams, uploadImage, uploadDelete ,getExampleList} from "@/api/upload";
import {parseTime} from '@/tool/methods'
import { setImageUrl ,getImageUrl} from '@/api/upload'; // Adjust the path accordingly
import { Dialog } from 'vant';
  export default {
      props:['settle'],
    data() {
      return {
        name:"",
        phone: "",
        identity_card_no:"",
        bank_name: "",
        account: "",
        alipay_account:"",
        card_url:[],
        back_url:[],
        front_url: [],
        status:0,
        status_desc:""
      };
    },
    mounted() {
    window.scrollTo(0, 0)
    //   this.fetchRegions(1, 0);
      this.getInfo()
    },
    methods: {
        onClickLeft(){
            this.$router.go(-1)
        },
      async getInfo(){
        this.$http.get(IDENTITY_INFO).then(res=>{  
            this.status=res.data.status
            this.status_desc=res.data.status_desc
            this.name=res.data.name
            this.phone=res.data.phone
            this.identity_card_no=res.data.identity_card_no
            this.account=res.data.bank_card_no
            this.alipay_account=res.data.alipay_account
            this.bank_name=res.data.bank_name
            this.front_url=setImageUrl(res.data.front_image_url)
            this.back_url=setImageUrl(res.data.back_image_url)
            this.card_url=setImageUrl(res.data.bank_front_image_url)
            // this.handleDialog()
            if(res.data.status==0&&res.data.failure_reason){
                this.handleDialog(res.data)
            }
         })
            // this.back_url = this.settle.settler_data.front_url==''?[]:[{url:this.settle.settler_data.front_url}];
      },
      handleDialog(res){
        Dialog.alert({
            title: '失败提示',
            message: res.failure_reason,
            theme: 'round-button',
            confirmButtonColor:'#FF6200'
        }).then(() => {
        });
      },
    // 上传身份证正面
    async afterReadFront(file) {
      try {
        // 获取OSS上传参数
        if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
          this.ossParams = await getOssParams(this.$http);
        }
        if (!this.ossParams) {
          throw new Error("OSS参数未正确设置");
        }
        // 调用封装的上传函数
        await uploadImage(file, this.ossParams, this.front_url);
        // let params = {
        //   type: "identity_card",
        //   image_url: this.front_url.map((item) => item.url)[0],
        //   face: true,
        // };
        // this.$http.post(OCR_RECOGNIZE, params).then((res) => {
        //   this.identity_card_no = res.data.identity_card.identity_card_no;
        //   this.name=res.data.identity_card.name
        // });
      } catch (error) {
        console.error("处理上传错误:", error);
      }
    },
    // 删除身份证正面
    uploadDleteFront(file) {
      this.front_url = uploadDelete(file, this.front_url);
    //   this.identity_card = {};
    },
    // 上传身份证反面
    async afterReadBack(file) {
      try {
        // 获取OSS上传参数
        if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
          this.ossParams = await getOssParams(this.$http);
        }
        if (!this.ossParams) {
          throw new Error("OSS参数未正确设置");
        }
        // 调用封装的上传函数
        await uploadImage(file, this.ossParams, this.back_url);
        // let params = {
        //   type: "identity_card",
        //   image_url: this.back_url.map((item) => item.url)[0],
        //   face: false,
        // };
        // this.$http.post(OCR_RECOGNIZE, params).then((res) => {
         
        // });
      } catch (error) {
        console.error("处理上传错误:", error);
      }
    },
    // 删除身份证反面
    uploadDleteBack(file) {
      this.back_url = uploadDelete(file, this.back_url);
      // this.identity_card={}
    },
      // 上传银行卡正面
      async afterReadFrontCard(file) {
        try {
          // 获取OSS上传参数
          if (!this.ossParams || this.ossParams.expire_time < Date.now()) {
            this.ossParams = await getOssParams(this.$http);
          }
          if (!this.ossParams) {
            throw new Error("OSS参数未正确设置");
          }
          // 调用封装的上传函数
          await uploadImage(file, this.ossParams, this.card_url);
        //   let params = {
        //     type: "bank_card",
        //     image_url: this.card_url.map((item) => item.url)[0],
        //     //   face: true,
        //   };
        //   this.$http.post(OCR_RECOGNIZE, params).then((res) => {
        //     this.bank_name = res.data.bank_card.bank_name;
        //     this.account = res.data.bank_card.card_number;
        //   });
        } catch (error) {
          console.error("处理上传错误:", error);
        }
      },
      // 删除银行卡正面
      uploadDleteFrontCard(file) {
        this.card_url = uploadDelete(file, this.card_url);
        //   this.identity_card = {};
      },
      onSubmit(values) {
        let params={
            back_image_url: getImageUrl(this.back_url),
            front_image_url: getImageUrl(this.front_url),
            bank_front_image_url: getImageUrl(this.card_url),
            name:this.name,
            phone:this.phone,
            identity_card_no:this.identity_card_no,
            bank_name:this.bank_name,
            bank_card_no:this.account,
            alipay_account:this.alipay_account
        }
        this.$http.post(IDENTITY_COMMIT,params).then(res=>{
            this.$toast.success('提交成功')
            this.$router.push('/mine')
        })
        
       
      }
    },

  };
  </script>
  <style scoped lang="scss">
  .shop_info {
    padding-top:46px;
    ::v-deep .van-nav-bar .van-icon {
      color: #333 !important;
    }
    ::v-deep .van-nav-bar__text{
        color:#333
    }

  }

  .enterise_info_title {
    font-size: 0.28rem;
    font-weight: bold;
    background: #fff;
    padding: 0.2rem;

    span {
      color: red;
    }
  }

  .tianjia_pic {
    width: 100%;
  }

  .tianjia_text {
    width: 100%;
    position: absolute;
    bottom: -20px;
    left: 30%;
    transform: translateX(-50%);
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 0.24rem;
    color: #999999;
    // line-height: 17px;
    font-style: normal;
  }
.tip{
    width:95%;
    margin:0 auto;
    font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: .24rem;
color: #F9301B;
line-height: .4rem;
text-align: left;
font-style: normal;
margin-top: .2rem;
}
  </style>
